<!--
指令
    ng-app   模块
    ng-controller  控制器：中间件，视图和模型的装饰器

    ng-cloak 解决表达式闪屏
    ng-model
    ng-bind
    ng-click
视图模型 $scope
双向数据绑定
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        .ng-cloak{
            display: none;
        }
    </style>
</head>
<body ng-app="hd" ng-cloak class="ng-cloak">  <!--解决表达式闪屏 -->
<div ng-controller="ctrl">
    <button ng-click="add()">增加</button>
    <button ng-click="red()">减少</button>
    <br/>
    商品名称：{{goods.title}}<br/>
    价格：{{goods.price}}<br/>
    数量：{{goods.num}}<br/>
    总计：{{goods.num*goods.price}}<br/>
    {{name+":呵呵"}}
    <h2 ng-bind="name+':呵呵'"></h2>  <!--视图-->
    <input type="text" ng-model="name">   <!--修改后会更新ng-app包裹的范围，双向数据绑定-->
</div>
<script src="../1.6.9/angular.min.js"></script>
<script>
    //控制器属于一个模块
    var m = angular.module("hd",[]);//实例化模块，模块管理的DOM节点"hd",[]依赖的其它模块
    //双向数据绑定
    m.controller("ctrl",["$scope", function ($scope) {   //定义控制器   "ctrl"控制器名，依赖注入$scope
        //$scope  viewModel  视图模型
        $scope.name = "哈哈";
        $scope.goods = {
            title:"苹果",
            price:300,
            num:3
        };  //model  server
        $scope.add = function () {
            $scope.goods.num++;
        };
        $scope.red = function () {
            $scope.goods.num = Math.max(--$scope.goods.num,0);
        };
    }]);
</script>
</body>
</html>